import { createSignal, For, onMount } from "solid-js";
import anime, { easing } from "animejs";

import { clone } from "lodash";
import { randomInt } from "../../../scripts/utils/random.ts";
import FallingWord from "./falling-word.tsx";
import { useAnimate } from "solidjs-use";
import { SPEED } from "../../../config.ts";

export interface Word {
  word: string;
  translation: string[];
}

export default function Track(
  props: { id: number; vocabularies: Word[] },
) {
  let fallingContainerRef!: HTMLDivElement;

  const [mark, setMark] = createSignal<number>(0);

  // const time = () => (props.time / 1000).toFixed();
  const vocabularies = clone(props.vocabularies);
  const words = props.vocabularies.reduce<Word[]>((words) => {
    const word =
      vocabularies.splice(randomInt(0, vocabularies.length - 1), 1)[0];
    words.push(word);
    return words;
  }, []);

  onMount(() => {
    anime({
      targets: fallingContainerRef,
      translateY: ['-100%', '100%'],
      duration: words.length * 1000 * 100 / SPEED,
    });
  });

  return (
    <div class="relative w-full h-full bg-base-200 overflow-hidden">
      {/* Count Down */}
      {/* <div class="absolute z-20 left-1/2 -translate-x-1/2 bg-neutral rounded-box text-neutral-content items-center flex flex-col p-2">
        <span class="countdown font-mono text-5xl">
          <span
            style={{ "--value": time() }}
            aria-live="polite"
            aria-label={time()}
          >
            {time()}
          </span>
        </span>
        Count Down
      </div> */}
      <div class="absolute z-20 left-1/2 -translate-x-1/2 bg-neutral rounded-box text-neutral-content items-center flex flex-col p-2">
        <span class="countdown font-mono text-5xl">
          <span
            style={{ "--value": mark() }}
            aria-live="polite"
            aria-label={mark().toString()}
          >
            {mark()}
          </span>
        </span>
        Mark
      </div>

      <div
        ref={fallingContainerRef}
        class="absolute top-0 w-full h-fit flex flex-col gap-32"
      >
        <For each={words}>
          {(word, i) => <FallingWord word={word} x={`${i() % 2 ? 20 : 80}%`} addMark={()=>setMark(prev => prev+1)}></FallingWord>}
        </For>
      </div>
    </div>
  );
}
